<template>
    <view style="background-color: white">
        <!-- 基础表单校验 -->
        <up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
            <view class="form_part">
                <up-form-item label="反馈类型" prop="text" border-bottom @click="showOrCancel">
                    <up-input placeholder="请选择反馈的类型" border="none" v-model="form.text" disabled
                        disabledColor="#fff"></up-input>
                    <template v-slot:right>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-form-item>
                <up-form-item label="联系手机号" prop="contactPhone" border-bottom>
                    <up-input type="number" maxlength="11" placeholder="请输入要联系的手机号" border="none"
                        v-model="form.contactPhone"></up-input>
                </up-form-item>
                <up-form-item label="反馈内容" prop="content">
                    <up-textarea placeholder="请输入要反馈的内容" count v-model="form.content"></up-textarea>
                </up-form-item>
            </view>
        </up-form>
        <up-picker :show="show" :columns="columns" keyName="label" title="请选择反馈的类型" @cancel="showOrCancel"
            @confirm="Select"></up-picker>
    </view>
    <view class="form_button">
        <up-button type="primary" @click="submit">提交</up-button>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { addFeedback } from '@/api/complaint'


/* 数据 */
const formRef = ref<UniFormRef | null>(null)
const uToastRef = ref<any>(null)
const show = ref(false)
// 表单数据
const form = reactive({
    text: '',
    type: '',
    contactPhone: '',
    content: ''
})
// 表单校验
const rules = reactive({
    text: {
        type: 'string',
        required: true,
        message: '请选择反馈类型',
        trigger: ['blur', 'change']
    },
    content: {
        type: 'string',
        required: true,
        message: '请填写要反馈的内容',
        trigger: ['blur', 'change']
    },
    contactPhone: [{
        type: 'string',
        required: true,
        message: '请填写手机号',
        trigger: ['blur', 'change'],

    },
    {
        pattern: /(^1[3-9][0-9]{9}$)/g,
        message: '手机格式错误',
        trigger: ['blur', 'change']
    }]
})
// 选择器数据
const columns = ref([
    [{
        id: 1,
        label: '业务咨询'

    },
    {
        id: 2,
        label: '举报投诉'

    },
    {
        id: 3,
        label: '结果反馈'

    },
    {
        id: 4,
        label: '其他'

    }]
])



/* 方法 */
// 显示选择器
const showOrCancel = () => {
    show.value = !show.value
}
// 选择器确认
const Select = (e:any) => {
    form.text = e.value[0].label
    form.type = e.value[0].id
    showOrCancel()
}
// 提交
const submit = async () => {
    let valid = await formRef.value?.validate()
    if (valid) {
        uToastRef.value.show({
            message: '正在提交反馈',
            type: 'loading',
            duration: -1
        })
        let res = await addFeedback(form)
        uToastRef.value.hide()
        if (res.success) {
            uToastRef.value.show({
                position: 'top',
                message: '您已成功提交反馈',
                type: 'success',
                duration: 1000,
                complete() {
                    uni.navigateBack()
                }
            })
        }
    }
}

</script>

<style lang="scss" scoped>
.form_part {
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.form_button {
    margin-left: 5%;
    width: 90%;
}

.TranOut {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 45px 10px;
    color: royalblue;
    letter-spacing: 1px;
}

.allSmall {
    font-size: 12px;
}

.allLarge {
    font-size: 15px;
}
</style>